import CodeBlock from '@/components/CodeBlock'
import styles from './grammars.module.scss'
import { useOutletContext } from 'react-router-dom'

interface Demo {
  title: string | React.ReactNode
  desc: string | React.ReactNode
  examples: {
    label: string | React.ReactNode;
    file: string
  }[]
}

const GrammarsFrame: React.FC<{ data: Demo }> = ({ data }) => {
  const { curDemos } = useOutletContext<{ curDemos: Record<string, string> }>()

  return (
    <div className={styles.con}>
      <div className={styles.title}>
        <span className="hlcode">{data.title}</span> 方法说明
      </div>

      <div className={styles.subtitle}>
        <div className={styles.subLabel}>描述：</div>
        <div>{data.desc}</div>
      </div>

      {data.examples.map((ex, i) => (
        <div className={styles.subtitle} key={i}>
          <div className={styles.subLabel}>{ex.label}：</div>
          <CodeBlock rawCode={curDemos[ex.file]} rawType={ex.file.split('.')?.[1]} />
        </div>
      ))}
    </div>
  )
}

export default GrammarsFrame